<template>
    <div class="clickbtn-root">
        <div @click="btnClick" class="anniu">
            <div ref="huise" class="huise">
                <div ref="btn" class="btn"></div>
            </div>
        </div>
    </div>
</template>

<script>

export default{
    data(){
       return{
           bool:true
           } 
    },
    methods:{
        btnClick(){
            this.bool = !this.bool;
            if(this.bool){
                this.$refs.huise.style.left = "5vw";
                this.$refs.btn.style.backgroundColor = "white";
                this.$refs.btn.style.borderColor = "#0de16b";
            }else{
                this.$refs.huise.style.left = "0"
                // this.$refs.btn.style.backgroundColor = "#0de16b"
                this.$refs.btn.style.borderColor = "#b1b1b1";
            }
        }
    }
}
</script>

<style scoped>
    .clickbtn-root{
        width: 9.2vw;
        height: 4.7vw;
        position: relative;
    }
    .anniu,.huise{
        width: 9.2vw;
        height: 4.7vw;
        border-radius: 3vw;
    }
    .anniu{
        background-color: #0de16b;
        position:absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    .huise{
        background-color: #b1b1b1;
        position:absolute;
        top: 0;
        left: 5vw;
        transition: all 0.7s;
    }
    .btn{
        width: 4.4vw;
        height: 4.4vw;
        background-color: white;
        border: solid 0.1vw #0de16b;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
    }
</style>
